<template>
    <div v-if="model" class="editViews">
      <div style="margin-bottom: 5vw"><nav-bar></nav-bar></div>

      <div class="uploadfile">
        <!--引入vant上传文件组件-->
        <van-uploader class="uploadimg" preview-size="100vw" :after-read="afterRead" />
        <edit-banner left="头像">
          <img :src="model.user_img" slot="right" alt="" v-if="model.user_img">
          <img src="../images/userimg.jpg" slot="right" alt="" v-else>
        </edit-banner>
      </div>


      <edit-banner left="昵称" @bannerClick="show = true">
        <a href="javascript:;" slot="right">{{model.name}}</a>
      </edit-banner>
      <edit-banner left="账号">
        <a href="javascript:;" slot="right">{{model.username}}</a>
      </edit-banner>
      <edit-banner left="性别" @bannerClick="gendershow = true">
        <a href="javascript:;" slot="right">{{model.gender == '1'?"男":"女"}} </a>
      </edit-banner>
      <edit-banner left="个性签名" @bannerClick="textshow = true">
        <a href="javascript:;" slot="right">{{model.user_desc == ''?"哥的心，禁止访问":model.user_desc}}</a>
      </edit-banner>

      <van-dialog v-model="show" title="昵称"
                  @confirm="confirmClick"
                  @cancel = "content = ''"
                  show-cancel-button>
      <van-field v-model="content" autofocus />
    </van-dialog>
      <van-dialog v-model="textshow" title="个性签名" @confirm="textareaClick" show-cancel-button>
        <van-field v-model="content" type="textarea" autofocus />
      </van-dialog>
      <van-action-sheet v-model="gendershow"
                        :actions="actions"
                        @select="onSelect"
                        cancel-text="取消"
                        close-on-click-action
      />
      <div class="editback" @click="$router.back()">返回个人中心</div>
    </div>
</template>

<script>
  import NavBar from '../components/common/Navbar'
  import editBanner from '../components/common/editBanner'
    export default {
    components:{
      NavBar,
      editBanner
    },
        name: "Edit",
        data() {
            return {
              model:{},
              show:false,
              textshow:false,
              gendershow:false,
              content:'',
              actions: [{ name: '男' ,value:1}, { name: '女' ,value:0}],
            }
        },
        methods: {
          async selectUser(){
            const res = await this.$http.get('/user/' + localStorage.getItem('id'))
            this.model = res.data[0]
            console.log(this.model)
          },
          async afterRead(file){
            const fromdata = new FormData()
            fromdata.append('file',file.file)
            const res = await this.$http.post('/upload',fromdata)
            this.model.user_img = res.data.url
            this.UserUpdate()
          },
          async UserUpdate(){
            const res = await this.$http.post('/update/' + localStorage.getItem('id'),this.model)
            if (res.status){
              this.$msg.fail("修改成功")
            }
          },
          confirmClick(){
            this.model.name = this.content
            this.UserUpdate()
            this.content = ''
          },
          textareaClick(){
            this.model.user_desc = this.content
            this.UserUpdate()
            this.content = ''
          },
          onSelect(data){
            console.log(data.value)
            this.model.gender = data.value
            this.UserUpdate()
          },
        },
      created() {
        this.selectUser()
      }
    }
</script>

<style scoped lang="less">
.editViews a{
  color: #333333;
}
.editViews img{
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
}
.uploadfile{
  position: relative;
  overflow: hidden;
  .uploadimg{
    position: absolute;
    opacity: 0;
  }
}
  .editback{
    background-color: #9b9b9b;
    display: flex;
    color: white;
    border-radius: 10vw;
    font-size: 4vw;
    margin-top: 5vw;
    padding: 2vw 0;
    align-items: center;
    justify-content: center;
  }
</style>
